<script setup>
import { ref, onMounted } from 'vue';
import { useUserStore } from '@/stores/admin';
import { ElMessage, ElLoading } from 'element-plus';
import defaultAvatar from '@/assets/default.png';
import { adminUpdateAvatarService } from '@/api/admin';

const userStore = useUserStore();
const avatarUrl = ref('');
const fileInput = ref(null);
const selectedFile = ref(null);
const loading = ref(false);

// 初始化头像：统一使用 avatar 字段
onMounted(() => {
  avatarUrl.value = userStore.user.avatar || defaultAvatar;
});

// 处理文件选择
const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (!file) return;
  
  // 验证文件类型和大小
  if (!file.type.startsWith('image/')) {
    ElMessage.error('请选择图片文件（JPG、PNG格式）');
    return;
  }

  if (file) {
    console.log('✅ 文件选择成功:', file);
    console.log('📄 文件详情:', {
      name: file.name,
      type: file.type,
      size: file.size
    });
  }
  
  if (file.size > 2 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过2MB');
    return;
  }
  
  selectedFile.value = file;
  
  // 预览头像
  const reader = new FileReader();
  reader.onload = (e) => {
    avatarUrl.value = e.target.result;
  };
  reader.readAsDataURL(file);
};

// 保存头像
// 在 saveAvatar 函数中修复
const saveAvatar = async () => {
  if (!selectedFile.value) {
    ElMessage.warning('请先选择图片文件');
    return;
  }

  const loadingInstance = ElLoading.service({
    lock: true,
    text: '头像上传中...',
  });

  try {
    // 确保使用 FormData 正确包装文件
    const formData = new FormData();
    formData.append('avatar', selectedFile.value); // 关键：确保字段名与后端一致
    
    console.log('📤 发送文件数据:', {
      文件名: selectedFile.value.name,
      文件类型: selectedFile.value.type,
      文件大小: selectedFile.value.size
    });

    // 调用API - 添加错误处理
    const response = await adminUpdateAvatarService(formData);
    
    // 安全处理响应
    if (!response) {
      throw new Error('请求失败，未收到服务器响应');
    }
    
    if (response.data && response.data.code === '0000') {
      // 成功处理
      ElMessage.success('头像更新成功');
      userStore.setUser({
      ...userStore.user,
      avatar: response.data.data.avatar // 后端返回的头像URL
   });
    } else {
      throw new Error(response.data?.msg || '上传失败');
    }
  } catch (error) {
    console.error('上传失败详情:', error);
    ElMessage.error(error.message || '头像更新失败');
  } finally {
    loadingInstance.close();
  }
};

const triggerFileInput = () => {
  fileInput.value?.click();
};
</script>

<template>
  <div class="avatar-container">
    <el-card>
      <div class="card-header">
        <h2>更换头像</h2>
      </div>
      
      <div class="avatar-content">
        <div class="avatar-preview">
          <el-avatar :size="150" :src="avatarUrl">
            <img :src="defaultAvatar" alt="默认头像">
          </el-avatar>
        </div>
        
        <div class="upload-actions">
          <input 
            ref="fileInput" 
            type="file" 
            accept="image/*" 
            @change="handleFileChange"
            class="file-input"
          >
          <el-button type="primary" @click="triggerFileInput">
            选择图片
          </el-button>
          <el-button 
            type="success" 
            @click="saveAvatar"
            :disabled="!selectedFile"
          >
            上传头像
          </el-button>
        </div>
        
        <div class="upload-tips">
          <p>支持 JPG、PNG 格式，大小不超过 2MB</p>
          <p>建议尺寸：200×200 像素</p>
          <p v-if="selectedFile">已选择文件: {{ selectedFile.name }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.avatar-container {
  padding: 20px;
}

.card-header {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.avatar-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.avatar-preview {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #ddd;
}

.upload-actions {
  display: flex;
  gap: 10px;
}

.file-input {
  display: none;
}

.upload-tips {
  text-align: center;
  color: #999;
  font-size: 14px;
}
</style>